<template>
  <span class="v-breadcrumb__item">
    <span class="v-breadcrumb__item__inner" ref="link"><slot></slot></span><span class="v-breadcrumb__separator">{{separator}}</span>
  </span>
</template>
<script>
  export default {
    name: 'VBreadcrumbItem',
    props: {
      to: {},
      replace: Boolean,
    },
    data() {
      return {
        separator: '',
      };
    },
    mounted() {
      this.separator = this.$parent.separator;
      if (this.to) {
        const link = this.$refs.link;
        link.addEventListener('click', () => {
          const to = this.to;
          if (this.replace) {
            this.$router.replace(to);
          } else {
            this.$router.push(to);
          }
        });
      }
    },
  };
</script>
